<template>
    <div class="search" @click="Tosear">
        <div class="icon1">
            <van-icon name="search" color="#ddd" size=".7rem" />
        </div>
        <input type="text" placeholder="推荐搜索 关键词" class="inp">
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function Tosear() {
    router.push('/pageSearch')
}
</script>

<style lang="scss" scoped>
.search {
    width: 550px;
    height: 80px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background: #ffffff;
    box-sizing: border-box;
    justify-content: space-around;
    border-radius: 10px;
    overflow: hidden;

    .icon1 {
        width: 40px;
        height: 40px;
        padding-left: 30px;
        display: flex;
        align-items: center;
        /*   margin: 0 10px*/
    }

    .inp {
        width: 540px;
        height: 80px;
        outline: none;
        border: transparent;
        font-size: 32px;
        padding: 0 0 0 120px
    }
}
</style>